//
//  MomentsView.swift
//  WechatApp
//
//  Created on 2024.
//

import SwiftUI
import UIKit

struct MomentsView: View {
    var body: some View {
        ScrollView {
            VStack(spacing: 0) {
                // Header
                ZStack(alignment: .bottomLeading) {
                    if let image = UIImage(named: "img_8") {
                        Image(uiImage: image)
                            .resizable()
                            .aspectRatio(contentMode: .fill)
                            .frame(height: 300)
                            .clipped()
                    } else {
                        Color.gray.opacity(0.3)
                            .frame(height: 300)
                    }
                    
                    HStack {
                        if let avatarImage = UIImage(named: "img_1") {
                            Image(uiImage: avatarImage)
                                .resizable()
                                .aspectRatio(contentMode: .fill)
                                .frame(width: 64, height: 64)
                                .clipShape(Circle())
                                .overlay(Circle().stroke(Color.white, lineWidth: 2))
                        } else {
                            Circle()
                                .fill(Color.gray.opacity(0.3))
                                .frame(width: 64, height: 64)
                                .overlay(Circle().stroke(Color.white, lineWidth: 2))
                        }
                        
                        Text("Sean")
                            .font(.system(size: 20, weight: .bold))
                            .foregroundColor(.white)
                            .padding(.bottom, 8)
                    }
                    .padding(16)
                }
                
                // Moments list
                ForEach(0..<10, id: \.self) { index in
                    MomentItem(index: index)
                }
            }
        }
        .navigationBarTitleDisplayMode(.inline)
        .toolbar {
            ToolbarItem(placement: .navigationBarTrailing) {
                Button(action: {}) {
                    Image(systemName: "camera.fill")
                        .foregroundColor(.white)
                }
            }
        }
        .toolbarBackground(.hidden, for: .navigationBar)
    }
}

struct MomentItem: View {
    let index: Int
    
    var body: some View {
        VStack(alignment: .leading, spacing: 12) {
            HStack(alignment: .top, spacing: 12) {
                NavigationLink(destination: ProfileView(name: "Friend Name", avatarUrl: "img_1")) {
                    if let avatarImage = UIImage(named: "img_1") {
                        Image(uiImage: avatarImage)
                            .resizable()
                            .aspectRatio(contentMode: .fill)
                            .frame(width: 40, height: 40)
                            .clipShape(RoundedRectangle(cornerRadius: 4))
                    } else {
                        RoundedRectangle(cornerRadius: 4)
                            .fill(Color.gray.opacity(0.3))
                            .frame(width: 40, height: 40)
                    }
                }
                
                VStack(alignment: .leading, spacing: 4) {
                    Text("Friend Name")
                        .font(.system(size: 16, weight: .bold))
                        .foregroundColor(Color(red: 0.34, green: 0.42, blue: 0.58))
                    
                    Text("This is moment #\(index) with \(imageCount) images.")
                        .font(.system(size: 15))
                    
                    // Image grid
                    ImageGridView(imageCount: imageCount, startIndex: index)
                    
                    HStack {
                        Text("2 hours ago")
                            .font(.system(size: 12))
                            .foregroundColor(.secondary)
                        
                        Spacer()
                        
                        Button(action: {}) {
                            Image(systemName: "ellipsis")
                                .font(.system(size: 12))
                                .foregroundColor(Color(red: 0.34, green: 0.42, blue: 0.58))
                                .padding(4)
                                .background(Color(red: 0.97, green: 0.97, blue: 0.97))
                                .clipShape(RoundedRectangle(cornerRadius: 4))
                        }
                    }
                }
            }
            .padding(16)
        }
        .background(Color.white)
        .overlay(
            Rectangle()
                .frame(height: 1)
                .foregroundColor(Color(red: 0.93, green: 0.93, blue: 0.93)),
            alignment: .bottom
        )
    }
    
    private var imageCount: Int {
        1 + (index % 9)
    }
}

struct ImageGridView: View {
    let imageCount: Int
    let startIndex: Int
    
    var body: some View {
        if imageCount == 1 {
            if let image = UIImage(named: "img_\(((startIndex) % 9) + 1)") {
                Image(uiImage: image)
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(maxWidth: 200, maxHeight: 200)
                    .clipShape(RoundedRectangle(cornerRadius: 4))
            } else {
                RoundedRectangle(cornerRadius: 4)
                    .fill(Color.gray.opacity(0.3))
                    .frame(maxWidth: 200, maxHeight: 200)
            }
        } else {
            let columns = imageCount == 4 ? 2 : 3
            let gridItems = Array(repeating: GridItem(.flexible(), spacing: 4), count: columns)
            
            LazyVGrid(columns: gridItems, spacing: 4) {
                ForEach(0..<imageCount, id: \.self) { i in
                    if let image = UIImage(named: "img_\(((startIndex + i) % 9) + 1)") {
                        Image(uiImage: image)
                            .resizable()
                            .aspectRatio(contentMode: .fill)
                            .frame(height: 100)
                            .clipShape(RoundedRectangle(cornerRadius: 4))
                    } else {
                        RoundedRectangle(cornerRadius: 4)
                            .fill(Color.gray.opacity(0.3))
                            .frame(height: 100)
                    }
                }
            }
            .frame(maxWidth: columns == 2 ? 200 : 300)
        }
    }
}

#Preview {
    NavigationView {
        MomentsView()
    }
}

